<template>
  <div>
    <base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-gradient-success">
      <!-- Card stats -->
    </base-header>
    <b-container fluid class="mt--7">
      <b-row>
        <b-col>
          <trade-record-table ref="trade" />
        </b-col>
      </b-row>
      <div class="mt-5"></div>
      <b-row>
        <b-col>
          <order-record-table ref="order" />
        </b-col>
      </b-row>
      <div class="mt-5"></div>
      <b-row>
        <b-col>
          <dailypnl-record-table ref="dailypnl" />
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  Table,
  TableColumn,
} from "element-ui";
import TradeRecordTable from "./Tables/TradeRecordTable.vue";
import OrderRecordTable from "./Tables/OrderRecordTable.vue";
import DailypnlRecordTable from "./Tables/DailypnlRecordTable.vue";
import port_path from "./setting_RT";
import axios from "axios";

const port_path_backtest=port_path+'/backtest';

export default {
  components: {
    TradeRecordTable,
    OrderRecordTable,
    DailypnlRecordTable,
    [Dropdown.name]: Dropdown,
    [DropdownItem.name]: DropdownItem,
    [DropdownMenu.name]: DropdownMenu,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
  },
  data() {
    return {
      names_of_tables: ["trade", "order", "dailypnl"],
    };
  },
  methods: {
    show_tables() {
      this.names_of_tables.forEach((name) => {
        const path = port_path_backtest + '/get_records_'+name;
        axios
          .get(path)
          .then((res) => {
            if (res.data.length) {
              this.show_table(name, res.data);
            } else {
              this.$notify({
                type: "warning",
                message: name+"记录为空！",
              });
            }
          })
          .catch((error) => {
            this.handle_error(error);
          });
      });
    },
    show_table(name, tableData) {
      this.$refs[name].update_tableData(tableData);
    },
    handle_error(error) {
      this.$notify({
        type: "warning",
        message: error,
      });
    },
  },
  created() {
    this.show_tables();
  },
};
</script>
<style>
.el-table.table-dark {
  background-color: #172b4d;
  color: #f8f9fe;
}

.el-table.table-dark th,
.el-table.table-dark tr {
  background-color: #172b4d;
}

.el-table.table-dark td,
.el-table.table-dark th.is-leaf {
  border-bottom: none;
}
</style>
